<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="1、设置促销规则"></el-step>
        <el-step title="2、选择参与商家/店铺"></el-step>
        <el-step title="3、设置参与商品"></el-step>
        <el-step title="4、提交审核"></el-step>
      </el-steps>
      <div v-show="active==1">
        <form class="form-horizontal mgt15">
          <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息</div>
          <div class="form-group">
            <!--活动名称-->
            <label class="col-sm-2 control-label ng-binding">促销活动名称：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-input placeholder="限制在64个字符以内"></el-input>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--活动时间-->
            <label class="col-sm-2 control-label ng-binding">活动时间：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-date-picker
                v-model="filters.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动开始"
                class="input_postion"
              ></el-date-picker>至
              <el-date-picker
                v-model="filters.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动结束"
                class="input_postion"
              ></el-date-picker>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
          <div class="form-group ng-scope">
            <!--活动类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">促销类型：</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio1">
                <el-radio :label="3" class="form-radio">满金额赠</el-radio>
                <el-radio :label="6" class="form-radio">满商品赠</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <!--活动类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">是否叠加应用：</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio1">
                <el-radio :label="3" class="form-radio">否（超量：按最高层级享受优惠）</el-radio>
                <el-radio :label="6" class="form-radio">是（倍量：每满一级优惠一次）,上限</el-radio>
                <el-input size="mini" style="width:100px"></el-input>次
              </el-radio-group>cu'x
            </div>
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <!--活动类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">赠品类型：</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio2">
                <el-radio :label="3" class="form-radio">赠商品</el-radio>
                <el-radio :label="6" class="form-radio">赠优惠券</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <label class="col-sm-2 control-label ng-binding">活动描述：</label>
            <div class="col-sm-9">
              <label class="col-sm-1 ng-binding">中文</label>
              <div class="col--sm-4">
                <el-input
                  type="text"
                  class="form-control mgB10 ng-pristine ng-valid"
                  maxlength="100"
                  placeholder="最多输入100个字"
                ></el-input>
              </div>
              <div class="col--sm-12">
                <label class="mgB0 ng-binding">注：非必填字段，不填将显示系统默认文案。自定义输入活动说明后将显示在前台商品详情页中，请认真填写。</label>
                <a
                  href
                  style="color:blue;text-decoration:underline;"
                  data-toggle="modal"
                  data-target="#custom-width-modal-img"
                >
                  <!-- <i class="ng-binding">查看示例</i> -->
                </a>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--是否排斥优惠券-->
            <label class="col-sm-2 control-label ng-binding">是否排斥优惠券：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio3">
                <el-radio :label="3" class="form-radio">是</el-radio>
                <el-radio :label="6" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope">
            <!--是否包邮-->
            <label class="col-sm-2 control-label ng-binding">是否包邮：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio4">
                <el-radio :label="6" class="form-radio">是</el-radio>
                <el-radio :label="3" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">参与条件</div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
            <!--活动渠道-->
            <div
              class="line line-dashed b-b line-lg"
              ng-show="promotionDetailContent.channelCodes.length > 0"
            ></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
              <label class="col-sm-2 control-label ng-binding">活动渠道：</label>

              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>
            <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
              <label class="col-sm-2 control-label ng-binding">活动平台：</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate1"
                  v-model="checkAll1"
                  @change="handleCheckAllChange1"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
                  <el-checkbox v-for="city in cities1" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">新老用户：</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate2"
                  v-model="checkAll2"
                  @change="handleCheckAllChange2"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
                  <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">会员类型：</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate3"
                  v-model="checkAll3"
                  @change="handleCheckAllChange3"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities3" @change="handleCheckedCitiesChange3">
                  <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 会员等级(修改) -->
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <div ng-repeat="e in memberLevelArray" class="ng-scope">
                <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级:</label>
                <div class="col-sm-10 pdt3px">
                  <el-checkbox
                    :indeterminate="isIndeterminate4"
                    v-model="checkAll4"
                    @change="handleCheckAllChange4"
                  >全选</el-checkbox>
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-model="checkedCities4" @change="handleCheckedCitiesChange4">
                    <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
              <!--备注-->
              <label class="col-sm-2 control-label ng-binding">备注：</label>
              <div class="col-sm-10 pdt3px themeTextColor">
                <quill-editor
                  v-model="content"
                  ref="myQuillEditor"
                  style="height: 300px;"
                  :options="editorOption"
                ></quill-editor>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="tab-container" v-show="active==2">
        <el-tabs type="border-card" style="margin-top: 15px;">
          <el-tab-pane label="商家">
            <div style="float: right;margin-bottom: 10px;">
              <el-button type="primary" size="mini" @click="querySupplierListForAdd()">添加商家</el-button>
              <el-button type="danger" size="mini" @click="delAllSelectedSupplier()">批量删除</el-button>
            </div>
            <el-table :data="businessList" border style="width: 100%">
              <el-table-column prop="id" label="商品编号"></el-table-column>
              <el-table-column prop="name" label="商家名称"></el-table-column>
              <el-table-column prop="type" label="组织分类"></el-table-column>
              <el-table-column prop="type" label="操作"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="店铺">
            <div style="float: right;margin-bottom: 10px;">
              <el-button type="primary" size="mini" @click="querySupplierListForAdd2()">添加店铺</el-button>
              <el-button type="danger" size="mini" @click="delAllSelectedSupplier()">批量删除</el-button>
            </div>
            <el-table :data="shopList" border style="width: 100%">
              <el-table-column prop="id" label="店铺编号"></el-table-column>
              <el-table-column prop="name" label="店铺名称"></el-table-column>
              <el-table-column prop="type" label="店铺类型"></el-table-column>
              <el-table-column prop="type" label="操作"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active==3">
        <el-tabs type="border-card">
          <el-tab-pane label="促销商品选择">
            <div style=" height: 80px;">
              <el-row class="t_r pb20">
                <el-button
                size="mini"
                type="primary"
                @click="productSelectionModal()"
              >添加促销商品</el-button>
              <el-button
                size="mini"
                type="danger"
                v-show="modalShow"
                @click="productSelectionModals()"
              >批量删除</el-button>
              <el-button
                size="mini"
                type="primary"
                v-show="modalShow==2"
                @click="batchReAdd()"
              >批量重新添加</el-button>
              </el-row>
              <el-button-group style="float:right;">
                <el-button size="mini" @click="importCommodityModal">
                  模板下载
                  <i class="el-icon-download el-icon--right"></i>
                </el-button>
                <el-button size="mini" @click="importCommodityModal">
                  商品导入
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-button-group>
            </div>
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="生效商品(1)" name="0">
                <div>
                  <div style="margin-bottom: 10px;float: right;">
                    <el-button-group>
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="info"
                        icon="el-icon-search"
                        @click="showQueryCondition()"
                      >搜索</el-button>
                    </el-button-group>
                  </div>
                  <div>
                    <div style="padding-top: 40px;padding-bottom: 20px;" v-show="setUp">
                      <el-form :model="dataForm" :inline="true">
                        <el-form-item label="商品编号">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品条码">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="计量单位">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商家名称">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="零售价 ">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="直降（元）">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商家单渠道限购">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="店铺单渠道限购">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="个人单渠道限购">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="订单限购">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                      </el-form>
                      <div style="margin-bottom: 20px;float: right;margin-right: 13.8%;">
                        <el-button
                          size="mini"
                          style="float: left;"
                          type="primary"
                          @click="batchReAdd()"
                        >保存</el-button>
                      </div>
                    </div>
                    <div style="padding-top: 40px;padding-bottom: 20px;" v-show="search">
                      <el-form :model="dataForm" :inline="true">
                        <el-form-item label="商家">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品编号">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品条码">
                          <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                      </el-form>
                      <div style="margin-bottom: 20px;float: right;margin-right: 13.8%;">
                        <el-button
                          size="mini"
                          style="float: left;"
                          type="primary"
                          @click="batchReAdd()"
                        >查询</el-button>
                        <el-button
                          size="mini"
                          style="float: left;"
                          type="primary"
                          @click="batchReAdd()"
                        >重置</el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
                    <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                    <el-table-column prop="address" label="商品条码"></el-table-column>
                    <el-table-column prop="unit" label="计量单位"></el-table-column>
                    <el-table-column prop="shopName" label="商家名称"></el-table-column>
                    <el-table-column prop="price" label="零售价"></el-table-column>

                    <el-table-column prop="address" label="操作"></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="互斥商品(0)">
                <el-table border style="width: 100%" @selection-change="repelSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                  <el-table-column prop="address" label="商品条码"></el-table-column>
                  <el-table-column prop="unit" label="计量单位"></el-table-column>
                  <el-table-column prop="shopName" label="商家名称"></el-table-column>
                  <el-table-column prop="price" label="互斥记录时间"></el-table-column>
                  <el-table-column prop="markdown" label="操作"></el-table-column>
                </el-table>
                <div style="margin-top: 10px;">
                  <el-button size="mini" type="primary" @click="promotionPriceCheckAndSubmit()">确认添加</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="促销赠品设置">
            <!-- 促销赠品设置 -->

            <div>
              <div>
                <el-table :data="tableSet" border style="width: 100%">
                  <el-table-column label="优惠阶梯" type="index" :index="indexMethod" width="200px"></el-table-column>
                  <el-table-column label="促销规则">
                    <template slot-scope="scope">
                      <span>
                        满
                        <el-input size="mini" style="width:300px"/>
                        {{ scope.row.promotionRules }}元
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="促销赠品">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="addPro(scope.$index, scope.row)">添加赠品</el-button>
                      <el-button size="mini" @click="checkPro(scope.$index, scope.row)">查看赠品</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="operating" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableSet)"
                        type="text"
                        size="small"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div style="text-align:left;margin-top:15px;">
                <el-button size="mini" @click="addSet">新增优惠</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active==4">
        <div style="font-size:25px;text-align: center;margin-top: 27px;">
          <el-alert title="等待审核,审核通过后立即生效" type="success" center></el-alert>
        </div>
      </div>
    </div>
    <div>
      <el-button style="margin-top: 60px;margin-bottom: 60px;" @click="next">下一步</el-button>
    </div>
    <!-- 选择参与商家 -->
    <el-dialog
      :title="'添加商家'"
      width="40%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <div>
        <div>
          <el-form :inline="true"  size="mini">
            <el-form-item label="商家编号：" label-width="100px">
              <el-input placeholder='商家编号' size="mini"></el-input>
            </el-form-item>
            <el-form-item label="商家名称：" label-width="100px">
              <el-input placeholder='商家名称' size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-row class="t_r">
            <el-button size="mini">查询</el-button>
            <el-button size="mini">重置</el-button>
          </el-row>
        </div>
        <div style="padding-top: 45px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="addSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="商家编号"></el-table-column>
            <el-table-column prop="productName" label="商家名称"></el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_r">
        <el-button :size="size" @click.native="editDialogVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="editDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>

    <!--新增编辑界面-->
    <el-dialog
      :title="'添加商品'"
      :inline="true"
      width="65%"
      :visible.sync="productVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form :model="dataForm" label-width="90px" ref="dataForm" :size="size">
          <div class="col-sm-9 search-input">
            <el-form-item label="商品名称：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商家名称"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9 search-input">
            <el-form-item label="商品编号：" label-width="103px">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品编号"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9 search-input">
            <el-form-item label="商品条码：" label-width="105px pl15">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品条码"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9 search-input">
            <el-form-item label="商品类别：">
              <TreeSelect
                :props="props"
                :options="optionData"
                :value="valueId"
                :clearable="isClearable"
                :accordion="isAccordion"
                @getValue="getValue($event)"
                @check-change="handleCheckChange"
              />
            </el-form-item>
          </div>
          <div class="col-sm-9 search-input">
            <el-form-item label="商品品牌：">
              <el-select v-model="value6" multiple placeholder="请选择" collapse-tags>
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-sm-9 search-input">
            <el-form-item label="商家名称：">
              <el-select v-model="value5" multiple placeholder="请选择" collapse-tags>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="addSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
          <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="address" label="商品条码"></el-table-column>
          <el-table-column prop="unit" label="计量单位"></el-table-column>
          <el-table-column prop="shopName" label="商品品牌"></el-table-column>
          <el-table-column prop="price" label="商品类别"></el-table-column>
          <el-table-column prop="markdown" label="所属商家名称"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="productVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择参与店铺 -->
    <el-dialog
      :title="'添加参与店铺'"
      width="40%"
      :visible.sync="editDialogVisible2"
      :close-on-click-modal="false"
    >
      <div>
        <div>
          <el-form :inline="true"  size="mini">
             <el-row class="search-input">
               <el-form-item label="店铺名称：" label-width="100px">
              <el-input placeholder='请输入店铺名称' size="mini"></el-input>
            </el-form-item>
            <el-form-item label="店铺编号：" label-width="100px">
              <el-input placeholder='请输入店铺编号' size="mini"></el-input>
            </el-form-item>
            <el-form-item label="所属商家编号：" label-width="100px">
              <el-input placeholder='请输入所属商家编号' size="mini"></el-input>
            </el-form-item>
            <el-form-item label="所属商家名称：" label-width="100px">
              <el-input placeholder='请输入所属商家名称' size="mini"></el-input>
            </el-form-item>
             </el-row>
          </el-form>
          <el-row class="t_r">
            <el-button size="mini" @click="querySupplierListForAdd2()">查询</el-button>
           <el-button size="mini" @click="querySupplierListForAdd2()">重置</el-button>
          </el-row>
        </div>
        <div style="padding-top: 45px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="addSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="店铺编号"></el-table-column>
            <el-table-column prop="productName" label="店铺名称"></el-table-column>
            <el-table-column prop="productName" label="所属商家"></el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_r">
        <el-button :size="size" @click.native="editDialogVisible2 = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="editDialogVisible2 = false">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看赠品 -->
    <el-dialog :title="'已添加赠品'" width="40%" :visible.sync="proShow" :close-on-click-modal="false">
      <div>
        <div>
          <el-form :inline="true" size="mini" style="text-align:center">
            <el-form-item label="前台选品方式" label-width="100px">
              <el-select v-model="filters.type" style="width: 200px;" placeholder="前台选品方式">
                <el-option label="SPU" value="1"></el-option>
                <el-option label="SKU" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单次赠送选品数" label-width="100px">
              <el-input placeholder size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="padding-top: 45px;">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="pro_id" label="商品编码"></el-table-column>
            <el-table-column prop="pro_name" label="商品名称"></el-table-column>
            <el-table-column prop="pro_no" label="商品条码"></el-table-column>
            <el-table-column prop="pro_unit" label="计量单位"></el-table-column>
            <el-table-column prop="store_name" label="商家名称"></el-table-column>
            <el-table-column prop="pro_price" label="原价（元）"></el-table-column>
            <el-table-column prop="pro_num" label="单次赠送数量"></el-table-column>
            <el-table-column prop="member_no" label="个人单渠道限购"></el-table-column>
            <el-table-column prop="shop_count" label="店铺单渠道限购"></el-table-column>
            <el-table-column prop="store_no" label="商家单渠道限购"></el-table-column>
            <el-table-column prop="oprating" label="操作"></el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="proShow = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="editDialogVisible2 = false">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看示例 -->
    <el-dialog :title="'查看示例'" width="40%" :visible.sync="p_show" :close-on-click-modal="false">
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <div>
          <el-image :src="p_url" style="    margin-top: -72px;"></el-image>
        </div>
      </div>
    </el-dialog>
    <!-- 导入、上传弹窗-->
    <el-dialog
      :title="operation?'商品导入':'下载模板'"
      :inline="true"
      width="20%"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
    >
      <div style="padding-top: 15px;">
        <el-button type="primary" icon="el-icon-download" v-show="operation">商品导入模板</el-button>
        <el-button type="primary" icon="el-icon-upload" v-show="operation==false">商品导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import TreeSelect from "@/views/Core/TreeSelect";
import { darkmagenta } from "color-name";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const channelArr = ["bbc"];
const channelArr1 = ["APP端", "PC端", "微信"];
const channelArr2 = ["新用户", "老用户"];
const channelArr3 = ["普通会员"];
const channelArr4 = ["注册用户", "VIP会员", "金卡"];
export default {
  name: "Tab",
  components: {
    KtButton,
    TableColumnFilterDialog,
    quillEditor,
    TreeSelect
  },
  data() {
    return {
      p_show: false,
      radioShow: false,
      radioShows: true,
      size: "small",
      editDialogVisible: false,
      editDialogVisible2: false,
      proShow: false,
      url: "./static/shop.png",
      url2: "./static/shop2.png",
      p_url: "./static/shili.png",
      content: null,
      editorOption: {},
      size: "small",
      productVisible: false,
      uploadVisible: false,
      operation: false, // true:商品导入, false:下载模板
      activeName: 0,
      setUp: false,
      search: false,
      filters: {},
      editLoading: false,
      dataForm: {},
      modalShow: 1,
      multipleSelection: [],
      repelSelection: [],
      addSelection: [],
      businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
      shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
      //促销赠品设置
      tableSet: [{}],
      tableData: [
        {
          id: 1912250010887324,
          productName: "新供应商001",
          unit: "件",
          shopName: "张小二服饰",
          price: 1.2,
          markdown: 1,
          shopLimit1: 100,
          shopLimit2: 100,
          shopLimit3: 100
        }
      ],
      active: 1,
      radio1: 3,
      radio2: 3,
      radio3: 3,
      radio4: 3,
      radio5: 3,
      filters: [],
      shopList: [],
      businessList: [],
      checkAll: false,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      checkAll4: false,
      checkedCities: ["bbc"],
      checkedCities1: ["APP端", "PC端", "微信"],
      checkedCities2: ["新用户", "老用户"],
      checkedCities3: ["普通会员"],
      checkedCities4: ["注册用户", "VIP会员", "金卡"],
      cities: channelArr,
      cities1: channelArr1,
      cities2: channelArr2,
      cities3: channelArr3,
      cities4: channelArr4,
      isIndeterminate: true,
      isIndeterminate1: true,
      isIndeterminate2: true,
      isIndeterminate3: true,
      isIndeterminate4: true,
      options: [
        {
          value: "1",
          label: "京东直营"
        },
        {
          value: "2",
          label: "淘宝旗舰"
        },
        {
          value: "3",
          label: "良品铺子1店"
        }
      ],
      value5: [],
      options2: [
        {
          value: "1",
          label: "良品铺子"
        }
      ],
      value6: [],
      isClearable: true, // 可清空（可选）
      isAccordion: true, // 可收起（可选）
      valueId: 20, // 初始ID（可选）
      props: {
        // 配置项（必选）
        value: "id",
        label: "name",
        children: "children"
        // disabled:true
      },
      // 选项列表（必选）
      list: [
        { id: 2, parentId: 0, name: "居家生活", rank: 1 },
        { id: 4, parentId: 0, name: "数码家电", rank: 1 },
        { id: 5, parentId: 0, name: "母婴保健", rank: 1 },
        { id: 6, parentId: 0, name: "美食酒水", rank: 2 },
        { id: 7, parentId: 0, name: "个护清洁", rank: 2 },
        { id: 9, parentId: 0, name: "好物甄选", rank: 2 },

        { id: 101, parentId: 2, name: "个护健康", rank: 3 },
        { id: 102, parentId: 2, name: "3C数码", rank: 4 },
        { id: 103, parentId: 2, name: "汽车用品", rank: 5 },
        { id: 202, parentId: 101, name: "按摩电器", rank: 5 },
        { id: 203, parentId: 101, name: "个护美容", rank: 5 }
      ]
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? channelArr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleCheckAllChange1(val) {
      this.checkedCities1 = val ? channelArr1 : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.cities1.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.cities1.length;
    },
    handleCheckAllChange2(val) {
      this.checkedCities2 = val ? channelArr2 : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.cities2.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.cities2.length;
    },
    handleCheckAllChange3(val) {
      this.checkedCities3 = val ? channelArr3 : [];
      this.isIndeterminate3 = false;
    },
    handleCheckedCitiesChange3(value) {
      let checkedCount = value.length;
      this.checkAll3 = checkedCount === this.cities3.length;
      this.isIndeterminate3 =
        checkedCount > 0 && checkedCount < this.cities3.length;
    },
    handleCheckAllChange4(val) {
      this.checkedCities4 = val ? channelArr4 : [];
      this.isIndeterminate4 = false;
    },
    handleCheckedCitiesChange4(value) {
      let checkedCount = value.length;
      this.checkAll4 = checkedCount === this.cities4.length;
      this.isIndeterminate4 =
        checkedCount > 0 && checkedCount < this.cities4.length;
    },
    querySupplierListForAdd() {
      this.editDialogVisible = true;
    },
    querySupplierListForAdd2() {
      this.editDialogVisible2 = true;
    },
    delAllSelectedSupplier() {},
    next() {
      if (this.active == 4) {
        this.$message({ message: "操作成功", type: "success" });
        return;
      }
      if (this.active++ > 3) this.active = 1;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    repelSelectionChange(val) {
      this.repelSelection = val;
    },
    addSelectionChange(val) {
      this.addSelection = val;
    },
    createPage() {
      this.$router.push("/CreatePromotion");
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == "0") {
        // 触发‘配置管理’事件
        this.first();
      } else {
        // 触发‘用户管理’事件
        this.second();
      }
    },
    first() {
      console.log("生效商品");
      this.modalShow = 1;
    },
    second() {
      console.log("互斥商品");
      this.modalShow = 2;addPro
    },
    //添加商品弹窗
    productSelectionModal() {
      this.productVisible = true;
    },
    showBatchSetUp() {
      if (this.search == true) {
        this.search = false;
      }
      if (this.setUp == false) {
        this.setUp = true;
      } else if (this.setUp == true) {
        this.setUp = false;
      }
    },
    showQueryCondition() {
      if (this.setUp == true) {
        this.setUp = false;
      }
      if (this.search == false) {
        this.search = true;
      } else if (this.search == true) {
        this.search = false;
      }
    },
    batchReAdd() {
      
      if (this.multipleSelection.length < 1) {
        this.$message({ message: "请选择要设置的商品", type: "error" });
        return false;
      }
      this.$message({ message: "操作成功", type: "success" });
    },
    updatePriceAndLimit() {},
    importCommodityModal(val) {
      if (val === 1) {
        this.operation = true;
      } else if (val == 2) {
        this.operation = false;
      }
      this.uploadVisible = true;
    },

    //选择Radio
    choseRadio(label) {
      if (label == 3) {
        (this.radioShow = false), (this.radioShows = true);
      }
      if (label == 6) {
        (this.radioShow = true), (this.radioShows = false);
      }
    },
    lookPhoto() {
      this.p_show = true;
    },
    // 取值
    getValue(value) {
      this.valueId = value;
      console.log(this.valueId);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      console.log(this.$refs.selectTree);
    },
    addSet() {
      this.tableSet.push({});
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    indexMethod(index) {
      return index * 1 + 1;
    },
    //添加赠品
    addPro() {
      this.productVisible = true;
    },
    //查看赠品
    checkPro() {
      this.proShow = true;
    }
  },
  computed: {
    /* 转树形数据 */
    optionData() {
      let cloneData = JSON.parse(JSON.stringify(this.list)); // 对源数据深度克隆
      return cloneData.filter(father => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        return father.parentId == 0; //返回第一层
      });
    }
  },
  mounted() {}
};
</script>

<style scoped lang='scss'>
.pdL10 {
  padding-left: 10px !important;
}
.mgB15 {
  margin-bottom: 15px !important;
}
.border-left {
  border-left: 3px #ddd solid !important;
}
.font-bold {
  font-weight: 700;
}
.form-group {
  margin-bottom: 15px !important;
  margin-right: -0px !important;
  margin-left: -0px !important;
}
.form-horizontal .control-label {
  padding-top: 5px;
  margin-bottom: 0;
  text-align: right;
}
.form-horizontal div {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
  font-size: 12px;
  color: #666666;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  word-wrap: break-word;
}
.form-horizontal .control-label {
  padding-top: 3px !important;
}
.col-sm-2 {
  width: 16.66666667%;
}
/* .col-sm-10 {
    width: 83.33333333%;
} */
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
  float: left;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
label {
  font-weight: normal;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group .pdt3px {
  padding-top: 3px;
}
.b-b {
  border-bottom: 1px solid #dddddd;
}
.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}
.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.i-checks {
  padding-left: 0;
  margin-right: 15px;
  cursor: pointer;
  color: #666666;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.panel-body tr {
  padding: 0 15px;
}
.mgt15 {
  margin-top: 15px;
}
.pb20{
  padding-bottom: 20px;
}
/deep/.el-input--mini{
  .el-input__inner{
    width: 200px;
  }
}
.pl15{
  /deep/.el-form-item--small{
    .el-form-item__content{
      padding-left: 15px;
    }
  }
}
</style>
